<template>
  <div>
    <el-radio-group v-model="thisAssessIndex">
      <div v-for="(assess , index) in assessCategoryInfo" :key="index">
        <p style="font-weight: 600;font-size: 20px;margin-bottom: 10px;">{{assess.title}}</p>
          <el-radio-button :class="item.index+1==assessIndex?'':(item.item.score==0||item.item.score==undefined?'isNotAchieved':'isAchieved')" :label="item.index+1" v-for="(item,index) in assess.list" :key="index"></el-radio-button>
      </div>

    </el-radio-group>
  </div>
</template>

<script>
  export default{
    name:'assessSelect',
    data(){
      return {
      }
    },
    props:{
      assessCount:{
        type:Number
      },
      assessIndex:{
        type:Number,
        default:0
      },
      assessCategoryInfo:{
        type:Array,
        default:[]
      }
    },
    methods:{
    },
    computed:{
      thisAssessIndex:{
        get(){
          let index=this.assessIndex
          return index++
        },
        set(val){
          let index=val
          index--
          this.$emit('assessChange',index)
        }
      }
    },
    mounted(){
    }
  }
</script>

<style scoped lang="scss">
/deep/ .isAchieved{
   .el-radio-button__inner{
    background-color: #67c23a;
    color: white;
  }
}
/deep/ .isNotAchieved{
   .el-radio-button__inner{
    background-color: #f56c6c;
    color: white;
  }
}
</style>
